<template>
  <el-drawer v-model="drawerVisible" :destroy-on-close="true" size="600px">
    <template #header>
      <h4>物料详情</h4>
    </template>
    <template #default>
      <div class="detail-container">
        <!-- 基本信息 -->
        <el-card class="detail-card" shadow="never">
          <template #header>
            <div class="card-header">
              <el-icon><InfoFilled /></el-icon>
              <span>基本信息</span>
            </div>
          </template>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="物料编码">
              <el-tag type="info" size="small">{{ materialDetail.materialCode }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="物料名称">
              {{ materialDetail.materialName }}
            </el-descriptions-item>
            <el-descriptions-item label="物料群组">
              {{ materialDetail.groupName || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="状态">
              <el-tag :type="materialDetail.status === 'ACTIVE' ? 'success' : 'warning'">
                {{ materialDetail.status === 'ACTIVE' ? '启用' : '禁用' }}
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>

        <!-- 规格信息 -->
        <el-card class="detail-card" shadow="never">
          <template #header>
            <div class="card-header">
              <el-icon><Setting /></el-icon>
              <span>规格信息</span>
            </div>
          </template>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="规格">
              {{ materialDetail.specification || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="型号">
              {{ materialDetail.model || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="计量单位">
              <el-tag type="primary" size="small">{{ materialDetail.unit }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="标准成本">
              <div v-if="materialDetail.standardCost" class="cost-display">
                <el-icon color="#E6A23C"><Money /></el-icon>
                <span class="cost-value">{{ materialDetail.standardCost.toFixed(2) }}</span>
              </div>
              <span v-else>-</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>

        <!-- 描述信息 -->
        <el-card class="detail-card" shadow="never" v-if="materialDetail.description">
          <template #header>
            <div class="card-header">
              <el-icon><Document /></el-icon>
              <span>描述信息</span>
            </div>
          </template>
          <div class="description-content">
            {{ materialDetail.description }}
          </div>
        </el-card>

        <!-- 系统信息 -->
        <el-card class="detail-card" shadow="never">
          <template #header>
            <div class="card-header">
              <el-icon><Clock /></el-icon>
              <span>系统信息</span>
            </div>
          </template>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="创建人">
              {{ materialDetail.createdBy || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">
              {{ formatDateTime(materialDetail.createdTime) }}
            </el-descriptions-item>
            <el-descriptions-item label="更新人">
              {{ materialDetail.updatedBy || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="更新时间">
              {{ formatDateTime(materialDetail.updatedTime) }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </div>
    </template>
    <template #footer>
      <el-button @click="drawerVisible = false">关闭</el-button>
      <el-button type="primary" @click="handleEdit">编辑</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { InfoFilled, Setting, Document, Clock, Money } from "@element-plus/icons-vue";
import { Material } from "@/api/modules/material";

interface DetailProps {
  row: Material.MaterialListItem;
  onEdit?: (row: Material.MaterialListItem) => void;
}

const drawerVisible = ref(false);
const materialDetail = ref<Material.MaterialListItem>({} as Material.MaterialListItem);
const onEditCallback = ref<((row: Material.MaterialListItem) => void) | undefined>();

// 格式化时间
const formatDateTime = (dateTime: string) => {
  if (!dateTime) return "-";
  return new Date(dateTime).toLocaleString("zh-CN");
};

// 接收父组件参数
const acceptParams = (params: DetailProps) => {
  materialDetail.value = params.row;
  onEditCallback.value = params.onEdit;
  drawerVisible.value = true;
};

// 编辑按钮点击
const handleEdit = () => {
  if (onEditCallback.value) {
    onEditCallback.value(materialDetail.value);
  }
  drawerVisible.value = false;
};

defineExpose({
  acceptParams
});
</script>

<style scoped>
.detail-container {
  padding: 0 8px;
}

.detail-card {
  margin-bottom: 16px;
}

.detail-card:last-child {
  margin-bottom: 0;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #303133;
}

.description-content {
  padding: 12px;
  background-color: #f5f7fa;
  border-radius: 4px;
  line-height: 1.6;
  color: #606266;
}

.cost-display {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cost-value {
  font-weight: 600;
  color: #e6a23c;
}

.el-drawer__header h4 {
  margin: 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

:deep(.el-descriptions__label) {
  width: 120px;
  font-weight: 600;
}

:deep(.el-card__header) {
  padding: 12px 20px;
  background-color: #fafafa;
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-card__body) {
  padding: 20px;
}
</style>